<template>
	<button @click="clickHandle" class="m-button" :class="[`${size}`, `${type}`]" :disabled="disabled" :style="style">
		<view class="loading-box" :class="[`${type}`]" v-if="loading">
			<image class="loading" src="/static/images/default/btn-spin.png"></image>
		</view>
		<slot></slot>
	</button>
</template>
<script>
export default {
	name: 'm-button',
	props: {
		disabled: {
			type: Boolean,
			default: false
		},
		loading: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: 'default' //  default（默认） |  primary（次重要） | none关闭背景  | hollow空心 | falls灰色(会强制设置颜色)
		},
		size: {
			type: String,
			default: '' // small | default
		},
		bgColor: {
			type: String,
			default: ''
		},
		radius: {
			default: '',
			type: String
		},
		gap: {
			default: '',
			type: String
		},
		color: {
			default: '',
			type: String
		}
	},
	computed: {
		style() {
			let style = {
				color: this.color,
				'font-weight': this.weight
			};
			const gap = this.gap.split(' ').filter((x) => x);
			const radius = this.radius.split(' ').filter((x) => x);
			if (this.gap) {
				style.padding = gap.map((n) => `${n}rpx`).join(' ');
			}
			if (this.radius) {
				style.borderRadius = radius.map((n) => `${n}rpx`).join(' ');
			}
			if (this.bgColor) {
				style.background = this.bgColor;
			}
			return style;
		}
	},
	methods: {
		clickHandle() {
			if (this.disabled) return;
			if (this.loading) return true;
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss">
button {
	border: unset;
	line-height: unset;
	-webkit-tap-highlight-color: unset;
	border: unset;

	&::after {
		display: none;
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.m-button {
	position: relative;
	border-radius: var(--m_btn_rad_2);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 80rpx;
	padding: var(--m_pad) 0rpx;
	color: var(--text);
	font-size: 26rpx;

	.loading-box {
		@extend .m-button;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		padding: 0;

		.loading {
			width: 40rpx;
			height: 40rpx;
			animation: rotate 1s infinite linear;
		}
	}
}

.default {
	border: 1px solid #304fff;
	background: linear-gradient(270deg, #304fff 0%, #304fff 100%);
	// color: var(--text_Whi);
	color: #fff !important;
	font-size: var(--fs_30);
}

.hollow {
	border: 1px solid var(--btn_default);
	background: unset;
	white-space: nowrap;
	color: var(--btn_default);
	padding: var(--m_pad-1) 0rpx;
}

.primary {
	color: var(--text_Whi);
	background: var(--btn_default);
	// background: var(--btn_falls);
}

.none {
	background: unset;
}

.falls {
	background: var(--btn_default);
	color: var(--text_Whi);
}

.warn {
	background: #e4ac28;
}

.disabled {
	background: var(--btn_disabled);
	color: var(--text_6);
}

.loading {
	filter: grayscale(0.5);
}

uni-button[disabled]:not([type]) {
	border: 1px solid var(--btn_disabled) !important;
	background: var(--btn_disabled) !important;
	color: var(--text_6) !important;
}

.small {
	font-size: var(--fs_26);
	padding: var(--m_pad10) 30rpx;
	display: inline-flex;
}
</style>
